<template>
<div>
    <ButtonGroup>
        <Button @click="addUser">增加用户</Button>
        <Button @click="handleSelectAll(true);" >设置全选</Button>
        <Button @click="handleSelectAll(false)">取消全选</Button>
        <Button type="primary" @click="removeSelected">删除选中</Button>
        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        </div>
    </ButtonGroup>
     <Modal
        v-model="modal1"
        title="填写用户信息"
        @on-ok="ok"
        @on-cancel="cancel">

        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
         <FormItem label="年龄" prop="age">
            <Input v-model="formValidate.age" placeholder="Enter your age"></Input>
        </FormItem>
         <FormItem label="密码" prop="password">
            <Input v-model="formValidate.password" placeholder="Enter your password" type="password"></Input>
        </FormItem>
        <FormItem label="E-mail" prop="email">
            <Input v-model="formValidate.email" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="所在城市" prop="city">
            <Input v-model="formValidate.city" placeholder="Enter your e-mail"></Input>
        </FormItem>
        
        <FormItem label="性别" prop="gender">
            <RadioGroup v-model="formValidate.gender">
                <Radio label="男">男</Radio>
                <Radio label="女">女</Radio>
            </RadioGroup>
            
        </FormItem>
        <FormItem label="爱好" prop="interest">
            <CheckboxGroup v-model="formValidate.interest">
                <Checkbox label="Eat"></Checkbox>
                <Checkbox label="Sleep"></Checkbox>
                <Checkbox label="Run"></Checkbox>
                <Checkbox label="Movie"></Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="自我介绍" prop="desc">
            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
        </FormItem>
       
    </Form>

    </Modal>
     <Modal
        v-model="modal2"
        title="修改用户信息"
        @on-ok="cok"
        @on-cancel="ccancel">

        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="姓名" prop="cname">
                <Input v-model="formValidate.cname" placeholder="Enter your name"></Input>
            </FormItem>
            <FormItem label="年龄" prop="cage">
                <Input v-model="formValidate.cage" placeholder="Enter your age"></Input>
            </FormItem>
            <FormItem label="密码" prop="cpassword">
                <Input v-model="formValidate.cpassword" placeholder="Enter your password" type="password"></Input>
            </FormItem>
            <FormItem label="E-mail" prop="cemail">
                <Input v-model="formValidate.cemail" placeholder="Enter your e-mail"></Input>
            </FormItem>
            <FormItem label="所在城市" prop="ccity">
                <Input v-model="formValidate.ccity" placeholder="Enter your e-mail"></Input>
            </FormItem>
            
            <FormItem label="性别" prop="cgender">
                <RadioGroup v-model="formValidate.cgender">
                    <Radio label="男">男</Radio>
                    <Radio label="女">女</Radio>
                </RadioGroup>
               
            </FormItem>
            <FormItem label="爱好" prop="cinterest">
                <CheckboxGroup v-model="formValidate.cinterest">
                    <Checkbox label="Eat"></Checkbox>
                    <Checkbox label="Sleep"></Checkbox>
                    <Checkbox label="Run"></Checkbox>
                    <Checkbox label="Movie"></Checkbox>
                </CheckboxGroup>
            </FormItem>
            <FormItem label="自我介绍" prop="cdesc">
                <Input v-model="formValidate.cdesc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
            </FormItem>
        
    </Form>
    </Modal>
    <Input v-model="filter.name" placeholder="用户搜索..." style="width: 300px"></Input>
     <Button  type="primary" shape="circle" icon="ios-search" @click="search"></Button>
    <Table ref="selection" @on-select-all="selectA" @on-select="getSelected" @on-select-cancel="cancelSelected" style="margin-top:20px;height:320px;margin-bottom:20px" border :columns="columns" :data="list"></Table>
     <Page style="margin-top:10px"  :total="filter.total" :page-size="filter.limit" :page-size-opts="[5,10, 20, 30, 40]" @on-change="changePage" @on-page-size-change="changeLimit" show-sizer></Page>
</div>


</template>

<script>
import Base from '../../base/Base'
import moment from 'moment'


    export default {
        mixins:[Base],
       
        data () {
            return {
               
                formValidate:{
                    name:null,
                    age:null,
                    email:null,
                    password:null,
                    desc:null,
                    gender: null,
                    city:null,
                    interest:[],
                    cname:null,
                    cage:null,
                    cemail:null,
                    cpassword:null,
                    cdesc:null,
                    ccity:null,
                    cgender:null,
                    cinterest:null,
                    changeId:null,
                },
             ruleValidate: {
                    name: [
                        { required: true, message: '名字不能为空', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                    
                    ],
                    city: [
                        { required: true, message: '所在城市不能为空', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '年龄不能为空', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                      
                    ],
                    gender: [
                        { required: true, message: '性别不能为空', trigger: 'change' }
                    ],
                   
                    desc: [
                        { required: true, message: '自我介绍不能为空', trigger: 'blur' },
                      
                    ]
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',

                    },
                   {
                        title: '姓名',
                        key: 'name',
                        width:70,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '密码',
                        key: 'password',
                        width:250
                    },
                     {
                         title:'邮箱',
                         key:'email'
                     },
                      {
                         title:'所在城市',
                         key:'city'
                     },
                     {
                         title:'性别',
                         key:'gender'
                     },
                     {
                         title:'爱好',
                         key:'interest',
                        render:(h,params)=>{
                            
                            return h('div',[
                                h('data',params.row.interest.toString())
                            ])
                        }
                     },
                     {
                         title:'介绍',
                         key:'desc'
                     },
                     {
                         title:'日期',
                          key:'date',
                          width:150,
                           render: (h, params) => {
                            return h('div', [
                                h('data',moment(params.row.date).format('YYYY-MM-DD HH:mm:ss'))
                            ]);
                           }

                     },
                    {
                        title: '自我介绍',
                        key: 'desc',
                        type:'html'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params)
                                            // this.show(params.index)
                                            this.modal2 = true;
                                            console.log(params)
                                            this.formValidate.cname=params.row.name;
                                            this.formValidate.cage=params.row.age;
                                            this.formValidate.cemail=params.row.email;
                                            this.formValidate.cpassword=params.row.password;
                                            this.formValidate.cdesc=params.row.desc;
                                            this.formValidate.changeId=params.row._id;
                                            this.formValidate.cgender=params.row.gender;
                                            this.formValidate.ccity=params.row.city;
                                            this.formValidate.cinterest=params.row.interest;

                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params)
                                            this.remove(params.index)
                                            this.axios({
                                                url:`http://10.31.155.63:3000/users/data/${params.row._id}`,
                                                method:'delete'
                                            }).then(res=>{
                                                this.$Message.info('删除成功');
                                                this.getDate();
                                            })
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],

            }
        },
    }
</script>

<style>

</style>
